@using MudBlazor.Docs.Services
@inherits LayoutComponentBase


<MudThemeProvider Theme="_currentTheme"/>
<MudDialogProvider FullWidth="true" MaxWidth="MaxWidth.ExtraSmall" />
<MudSnackbarProvider />

<MudSwipeArea OnSwipe="@OnSwipe">
    <MudLayout RightToLeft="@_rightToLeft">
        <MudAppBar Elevation="25">
            <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
            <MudText Typo="Typo.h5" Class="mudblazor-appbar-brand-text d-none d-md-flex">Mudblazor</MudText>
            <MudAppBarSpacer />
            <MudAutocomplete T="ApiLinkServiceEntry" Placeholder="Search" SearchFunc="Search" Variant="Variant.Outlined" ValueChanged="OnSearchResult" Class="docs-search-bar">
                <ItemTemplate Context="result">
                    <MudText>@result.Title</MudText> <MudText Typo="Typo.body2">@result.SubTitle</MudText>
                </ItemTemplate>
            </MudAutocomplete>
            <MudAppBarSpacer />
            <div class="d-none d-md-flex align-center">
                <MudMenu EndIcon="@Icons.Filled.KeyboardArrowDown" Label="Support" Color="Color.Inherit" Dense="true" Direction="Direction.Right" OffsetY="true">
                    <MudText Typo="Typo.body2" Class="px-4 py-2"><b>Community Support</b></MudText>
                    <MudMenuItem Link="https://discord.gg/mudblazor" Target="_blank">Discord</MudMenuItem>
                    <MudMenuItem Link="https://gitter.im/MudBlazor/community" Target="_blank">Gitter</MudMenuItem>
                    <MudText Typo="Typo.body2" Class="px-4 py-2"><b>Tools and resources</b></MudText>
                    <MudMenuItem Link="https://try.mudblazor.com/snippet" Target="_blank">TryMudBlazor</MudMenuItem>
                    <MudMenuItem Link="https://github.com/Garderoben/MudBlazor.Templates" Target="_blank">Templates</MudMenuItem>
                </MudMenu>
                <MudDivider Vertical="true" FlexItem="true" DividerType="DividerType.Middle" Class="mx-4 my-3" />
                @if (Wasm)
                {
                    <MudTooltip Text="Switch to Blazor server-side">
                        <MudIconButton Icon="@Icons.Material.Filled.Computer" Color="Color.Inherit" OnClick="@((e) => SwitchToServer())" />
                    </MudTooltip>
                }
                else
                {
                    <MudTooltip Text="Switch to Blazor wasm">
                        <MudIconButton Icon="@Icons.Material.Filled.Dns" Color="Color.Inherit" OnClick="@((e) => SwitchToWasm())" />
                    </MudTooltip>
                }
                <MudTooltip Text="Toggle light/dark theme">
                    <MudIconButton Icon="@Icons.Material.Filled.Brightness4" Color="Color.Inherit" OnClick="@((e) => DarkMode())" />
                </MudTooltip>
                <MudTooltip Text="GitHub repository">
                    <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/Garderoben/MudBlazor" Target="_blank" />
                </MudTooltip>
                <MudTooltip Text="Toggle right-to-left/left-to-right">
                    <MudIconButton Icon="@Icons.Material.Filled.FormatTextdirectionRToL" Color="Color.Inherit" OnClick="@((e) => RightToLeftToggle())" />
                </MudTooltip>
            </div>
            <MudMenu Icon="@Icons.Filled.Settings" Color="Color.Inherit" Dense="true" Direction="Direction.Right" OffsetY="true" Class="d-md-none">
                <div class="px-2">
                    @if (Wasm)
                    {
                        <MudIconButton Icon="@Icons.Material.Filled.Computer" Color="Color.Inherit" OnClick="@((e) => SwitchToServer())" />
                    }
                    else
                    {
                        <MudIconButton Icon="@Icons.Material.Filled.Dns" Color="Color.Inherit" OnClick="@((e) => SwitchToWasm())" />
                    }
                    <MudIconButton Icon="@Icons.Material.Filled.Brightness4" Color="Color.Inherit" OnClick="@((e) => DarkMode())" />
                    <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/Garderoben/MudBlazor" Target="_blank" />
                    <MudIconButton Icon="@Icons.Material.Filled.FormatTextdirectionRToL" Color="Color.Inherit" OnClick="@((e) => RightToLeftToggle())" />
                </div>
                <MudText Typo="Typo.body2" Class="px-4 py-2"><b>Community Support</b></MudText>
                <MudMenuItem Link="https://discord.gg/mudblazor" Target="_blank">Discord</MudMenuItem>
                <MudMenuItem Link="https://gitter.im/MudBlazor/community" Target="_blank">Gitter</MudMenuItem>
                <MudText Typo="Typo.body2" Class="px-4 py-2"><b>Tools and resources</b></MudText>
                <MudMenuItem Link="https://try.mudblazor.com/snippet" Target="_blank">TryMudBlazor</MudMenuItem>
                <MudMenuItem Link="https://github.com/Garderoben/MudBlazor.Templates" Target="_blank">Templates</MudMenuItem>
            </MudMenu>
        </MudAppBar>

        <MudDrawer @bind-Open=_drawerOpen Elevation="25" Class="mudblazor-appbar-band">
            <MudDrawerHeader Class="mudblazor-brand" LinkToIndex="true">
                <MudBlazorLogo />
            </MudDrawerHeader>
            <NavMenu @ref="@_navMenuRef" />
        </MudDrawer>
        <MudMainContent Class="mudblazor-main-content">
            @Body
            <MudScrollToTop TopOffset="400">
                <MudFab Icon="@Icons.Material.Filled.KeyboardArrowUp" Color="Color.Primary" />
            </MudScrollToTop>
            <NavigationFooter Section=_section Previous="@_previous" Next="@_next" />
        </MudMainContent>
    </MudLayout>
</MudSwipeArea>